<template>

	<view :style="{'position':'fixed', 'width':'100%', 'bottom': '0px','z-index':'998'}">
		<!-- <view class="tab-bar-line"></view> -->
		<!-- 设置选中时上方的半圆样式 -->
		<view
			:style="{'display': 'flex','flex-direction': 'row','justify-content': 'space-around', 'align-items': 'center' }">
			<view v-for="(item,index) in tabList" :index="index" :key="index">
				<view style="position: relative; top: 1px; width: 70px;height: 15px; overflow: hidden;">
					<view v-if="isSelect==index"
						style="border: 1px solid rgb(208, 208, 208,0.5); height: 70px;width: 100%; background: #fff; border-radius: 50%;">
					</view>
				</view>
			</view>
		</view>

		<view
			:style="{'border-top':'1px solid rgb(208, 208, 208,0.5)', 'background-color': '#fff','display': 'flex','flex-direction': 'row','justify-content': 'space-around', 'align-items': 'center','height':height+'px','padding-bottom': '5px' }">
			<view v-for="(item,index) in tabList" :index="index" :key="index" @click="tabClick(index,item.pagePath)">
				<view style=" width: 60px;  background-color: #fff;" v-if="item.iconfont!=undefined" class="gridView">
					<view v-if="item.showBadge&&Number(newBadgeNumber)>0" style="width: 15%;height: 15%;">
						<text 
							style="display:inline;position: absolute; margin-left: 13px; top: 18px;  padding: 1px 1px; border-radius: 50%; min-width: 15px; max-width: 25px; text-align: center; font-size: 11px; background-color: #d40000; color: #fff;">{{newBadgeNumber}}</text>
					</view>
					<uni-icons
						:customPrefix="item.customPrefix!=undefined&&item.customPrefix!=''?item.customPrefix:'my-iconfont'"
						:type="item.iconfont.icon"
						:size="(item.iconfont.size!=undefined &&item.iconfont.size!=''?item.iconfont.size:35)"
						:color="isSelect==index?item.iconfont.selectedColor:item.iconfont.color" />
						
					<text
						style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: 500;"
						:style="{'font-size':item.fontSize+'px','color':isSelect==index?selectedColor:color}">{{item.text}}</text>
				</view>
				<view class="gridView" v-else>
					<image :src="isSelect==index?item.selectIconPath:item.iconPath"
						:style="{'width':iconWidth+'px','height':iconWidth+'px'}"></image>
					<text :style="{ 'font-size':item.fontSize+'px','color':isSelect==index?selectedColor:color}"
						style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: 500;">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
	<!-- 新增一个空的占位控件，防止也页面滑动时内容被底部导航栏遮挡 -->
	<view v-show="isShowBottom" :style="{'height': (Number(height)+18)+'px' }"></view>
</template>

<script>
	import * as configJs from '@/common/config.js'
	/**
	 * @description 自定义底部导航栏
	 * @property {Array} tabList 导航栏加载数据数组 
	 * @property {String} color 文字未选中颜色
	 * @property {String} selectedColor 文字选中颜色  
	 * @property {Boolean}  isShowBottom 是否显示底部防遮挡控件 true(默认)/false
	 */
	export default {
		name: "newTabBar",
		props: {
			/**
			 * 导航栏显示信息列表
			 */
			tabList: {
				type: Array,
				default () {
					return []
				}
			},
			///文字默认时的颜色
			color: {
				type: [String, Number],
				default: '#000000'
			},
			///文字选中时的颜色
			selectedColor: {
				type: [String, Number],
				default: '#3851f6'
			},
			//导航栏高度
			height: {
				type: [String, Number],
				default: '50'
			},
			///图片图标的宽度和高度
			iconWidth: {
				type: [String, Number],
				default: 30
			},
			//默认选中的导航元素
			selectIndex: {
				type: [String, Number],
				default: 0
			}, //默认选择第一个
			//当前选择的索引值
			current: {
				type: [String, Number],
				default: 0
			},
			isShowBottom: {
				type: Boolean,
				default: true
			},
			//角标数字
			badgeNumber: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				isSelect: '',
				currentPath: '',
				newBadgeNumber: '0'
			}
		},
		watch: {
			// badgeNumber: {
			// 	handler(newVal, oldVal) {
			// 		console.log(newVal+oldVal)
			// 		if (newVal == "" || Number(newVal) <= 0) {
			// 			this.newBadgeNumber = "0";
			// 		}else if(Number(newVal)>=100){
			// 			this.newBadgeNumber = "99+";
			// 		}else{
			// 			this.newBadgeNumber =newVal;
			// 		}
			// 	},
			// 	immediate: true
			// }
		},
		mounted() {
			this.getTabTaskNum();
			this.changeSelect()
		},
		methods: {
			getTabTaskNum(){
				const num = uni.getStorageSync("ntaskConfirmNum")
				
				if(num!=undefined&&num!=""&&Number(num)>0){
					console.log(num)
					if(Number(num)>=100){
						this.newBadgeNumber ="99+";
					}else{
						this.newBadgeNumber =num;
					}
					console.log(this.newBadgeNumber)
				}else{
					this.newBadgeNumber ="0";
				}
			},
			//刷新页面数据
			reLoad(){
				const num = uni.getStorageSync("ntaskConfirmNum")
				if(num!=undefined&&num!=""&&num!=this.newBadgeNumber){
					this.getTabTaskNum();
				}
			},
			tabClick(selectIndex, url) {
				var isNew = true; //默认是跳转到新的界面
				if (this.isSelect == selectIndex) {
					isNew = false;
				}
				// var defultIndex = getApp().globalData.tabBar.selectIndex
				// getApp().globalData.tabBar.selectIndex = selectIndex;
				if (isNew) {
					uni.reLaunch({
						url: url,
						animationType: 'none',
						success: (res) => {

						},
						fail: (res) => {
							// getApp().globalData.tabBar.selectIndex = defultIndex;
						}
					})
				}
			},
			changeSelect() {
				///获取当前打开的所有界面数组
				var pages = getCurrentPages();
				//获取当前打开的页面的路由地址
				this.currentPath = pages[pages.length - 1].route;
				console.log(this.currentPath)
				if (this.tabList != undefined && this.tabList.length > 0) {
					this.tabList.forEach((value, index, array) => {
						if (value.pagePath != undefined) {
							if (value.pagePath.indexOf(this.currentPath) != -1) {
								this.isSelect = index
							}
						} else {
							this.isSelect = 0
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.gridView {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>